<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>金融银行首页</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1526273_th6ib2im2wf.css"/>
    <link rel="stylesheet" href="../css/jinrong.css"/>
</head>
<body>

                                <!--头部-->
<header>

    <div id="hr-1" flex="cross:center main:justify">

        <div class="sou" flex="cross:center">
            <i class="iconfont iconsousuo"></i>
            <input type="text" placeholder="点击输入你想要的内容"/>
        </div>

        <i class="iconfont iconmima--"></i>

    </div>

    <div id="hr-2" flex="main:justify">

        <div class="hr-bk" flex="cross:center dir:top">

            <img src="../img/shua.png"/>
            <p>刷卡收款</p>

        </div>

        <div class="hr-bk" flex="cross:center dir:top">

            <img src="../img/wuka.png"/>
            <p>无卡支付</p>

        </div>

        <div class="hr-bk" flex="cross:center dir:top">

            <img src="../img/shang.png"/>
            <p>附近商圈</p>

        </div>

        <div class="hr-bk" flex="cross:center dir:top">

            <img src="../img/xin.png"/>
            <p>还信用卡</p>

        </div>


    </div>

</header>

                                <!--导航-->

<nav>

    <div flex="main:justify">

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont iconyouhuiquan1"></i>
            <p class="nav-p">优惠券</p>
        </div>

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont icontuijianyouli"></i>
            <p>推荐有礼</p>
        </div>

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont iconshangcheng"></i>
            <p>我的商城</p>
        </div>

        <div class="nav-2" flex="dir:top cross:center">
            <i class="iconfont iconyouhuiquan"></i>
            <p>惠买单</p>
        </div>

    </div>

    <div flex="main:justify">

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont icondiban-"></i>
            <p>推荐办卡</p>
        </div>

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont iconjinlingyingcaiwangtubiao29"></i>
            <p>金融理财</p>
        </div>

        <div class="nav-1" flex="dir:top cross:center">
            <i class="iconfont iconjisudaikuan"></i>
            <p>极速贷款</p>
        </div>

        <div class="nav-2" flex="dir:top cross:center">
            <i class="iconfont iconxinyongqiashenqing"></i>
            <p>信用卡申请</p>
        </div>

    </div>


</nav>

                                <!--楼层1-->
<section class="f1" flex="main:center cross:center">

    <div id="banner"></div>

</section>

                                <!--楼层2-->

<section class="f2">

    <div class="f2-xbk">

        <div class="f2-lbk" flex="main:center cross:center"><h5>收支明细</h5></div>


    </div>

    <div class="f2-l2" flex="main:justify">

        <div class="f2-xinxi">

            <div flex><i class="iconfont iconrenminbi"></i><b>168.5</b><p>万</p></div>
            <p>本月收款金额</p>

        </div>


        <div id="hx"></div>

        <div class="f2-xinxi2">

            <div flex><i class="iconfont iconrenminbi"></i><b>16.05</b><p>万</p></div>
            <p>本月支出金额</p>

        </div>

    </div>

    <button>查看详细账单</button>

</section>

                                        <!--导航栏-->

<footer flex="main:justify">

    <div flex="dir:top cross:center">
        <i class="iconfont iconindex"></i><p class="fr-p">首页</p>
    </div>

    <div flex="dir:top cross:center">
        <i class="iconfont iconlicai"></i><p>理财</p>
    </div>

    <div flex="dir:top cross:center">

        <div flex>
            <i class="iconfont iconxiaoxi"></i>
            <div class="yuan"></div>

        </div>
            <p>消息</p>
    </div>

    <div flex="dir:top cross:center">
        <i class="iconfont iconwodedangxuan"></i><p>我的</p>
    </div>

</footer>







</body>
</html>